<template>
  <div id="header">
    <div class="nav-global">
      <div class="container">
        <h1 class="nav-logo" @click="$router.push({name:'main'})">
          <a href="javascript:;"></a>
        </h1>
        <ul class="nav-aside">
          <li class="nav-user">
            <a href="javascript:;">个人中心</a>
            <!--active-->
            <div class="nav-user-wrapper">
              <div class="nav-user-list">
                <dl class="nav-user-avatar">
                  <dd>
                    <span class="ng-scope"></span>
                  </dd>
                  <dt class="ng-binding">+86 138****9453</dt>
                </dl>
                <ul>
                  <li class="order">
                    <router-link to="/order">我的订单</router-link>
                  </li>
                  <li class="support">
                    <a href="javascript:;">售后服务</a>
                  </li>
                  <li class="coupon">
                    <a href="javascript:;">我的优惠</a>
                  </li>
                  <li class="information">
                    <a href="javascript:;">账户资料</a>
                  </li>
                  <li class="address">
                    <a href="javascript:;">收货地址</a>
                  </li>
                  <li class="logout">
                    <a href="javascript:;">退出</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <!-- 购物车列表 开始-->
          <!--active-->
          <li :class="{'nav-cart':true,'active':isShowCart}"
          @mouseover="showOrHideCart({bool:true})"
          @mouseleave="showOrHideCart({bool:false})">
            <a href="javascript:;">购物车</a>
            <!--根据class改变颜色-->
             <!-- cart-num改变购物车图形的颜色  当购物车为空时不加这个类 -->
            <span :class="{'cart-empty-num':true,'cart-num':totalCount!=0}">
              <i>{{totalCount}}</i>
            </span>
            <!-- 购物车面板 -->
            <cart-detail></cart-detail>
          </li>
          <!-- 购物车列表结束 -->
        </ul>
        <ul class="nav-list">
          <li>
            <a href="javascript:;">在线商城</a>
          </li>
          <li>
            <a href="javascript:;">坚果 Pro</a>
          </li>
          <li>
            <a href="javascript:;">Smartisan M1 / M1L</a>
          </li>
          <li>
            <a href="javascript:;">Smartisan OS</a>
          </li>
          <li>
            <a href="javascript:;">欢喜云</a>
          </li>
          <li>
            <a href="javascript:;">应用下载</a>
          </li>
          <li>
            <a href="javascript:;">官方论坛</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nav-sub">
      <div class="nav-sub-wrapper">
        <div class="container">
          <ul class="nav-list">
            <li>
              <a href="javascript:;">首页</a>
            </li>
            <li>
              <a href="javascript:;">手机</a>
            </li>
            <li>
              <a href="javascript:;">“足迹系列”手感膜</a>
            </li>
            <li class="active">
              <a href="javascript:;">官方配件</a>
            </li>
            <li>
              <a href="javascript:;">周边产品</a>
            </li>
            <li>
              <a href="javascript:;">第三方配件</a>
            </li>
            <li>
              <a href="javascript:;">全部商品</a>
            </li>
            <li>
              <a href="javascript:;">服务</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CartDetail from '../components/CartDetail/CartDetail'
import {mapState, mapMutations, mapGetters} from 'vuex'
export default {
  components:{
    CartDetail
  },
  computed:{
    //映射显示购物车列表
    ...mapState(['isShowCart']),
    ...mapGetters(['totalCount'])
  },
  methods:{
    ...mapMutations(['showOrHideCart'])
  }
};
</script>

<style lang="less">
#header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 25;
    .nav-sub{
      background-color: #fff;
    }
}
</style>